@import "../public/public.less";
@import "../public/theme.less";
.pr-160 {
    padding-right: 160px;
    box-sizing: border-box;
}
.gooddetail {
    .goodtail-head {
        width: 100%;
        height: 40px;
        margin: 30px 0 40px;
        background-color: #f5f5f5;
        .goodtail-title {
            .width-1260-center;
            .pr-160;
            line-height: 40px;
            .ivu-breadcrumb {
                color: #364049;
                font-size: 14px;
            }
            .ivu-breadcrumb > span:last-child {
                font-weight: inherit;
                color: inherit;
            }
        }
    }
    // 商品图片
    .gooddetail-picture {
        overflow: hidden;
        position: relative;
        .width-1260-center;
        .pr-160;
        padding-right: 0;
        .gooddetail-left {
            float: left;
            margin-right: 40px;
            .img-box {
                width: 460px;
                height: 460px;
                overflow: hidden;
                position: relative;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                img {
                    width: 100%;
                }
            }
            .gooddetail-left-mask {
                position: absolute;
                left: 0;
                bottom: -50px;
                width: 100%;
                height: 50px;
                background-color: rgba(73, 203, 205, 0.9);
                transition: all 0.5s ease;
                line-height: 50px;
                cursor: pointer;
                p {
                    font-size: 14px;
                    color: #ffffff;
                    padding-left: 24px;
                }
            }
            .telephone {
                color: #364049;
                font-size: 14px;
                margin-top: 28px;
                span:last-child {
                    margin-left: 154px;
                }
            }
        }
        .gooddetail-left:hover {
            .gooddetail-left-mask {
                bottom: 0;
            }
        }

        .gooddetail-right {
            float: left;
            width: 600px;
            padding-bottom: 20px;
            .good-title {
                margin-top: 20px;
            }
            p {
                font-size: 18px;
                color: #364049;
                font-weight: bold;
            }
            .gooddetail-right-pirce {
                width: 600px;
                margin-top: 28px;
                background-color: #f5f5f5;
                padding: 20px 0 25px 40px;
                span {
                    display: inline-block;
                    vertical-align: middle;
                }
                .label {
                    font-size: 14px;
                    color: #8898ab;
                    margin-right: 20px;
                }
                .presentprice {
                    margin-bottom: 4px;
                    .price {
                        font-size: 28px;
                        color: #fc6532;
                    }
                    .icon {
                        height: 18px;
                        width: 45px;
                        margin-left: 11px;
                    }
                }
                .originalprice {
                    .price {
                        font-size: 16px;
                        color: #8898ab;
                        text-decoration: line-through;
                    }
                }
                .sale {
                    .price {
                        font-size: 28px;
                        color: #fc6532;
                    }
                }
            }

            .options {
                font-size: 14px;
                margin-top: 28px;
                .delivery {
                    display: inline-block;
                    color: #485460;
                    font-size: 14px;
                    vertical-align: middle;
                    height: 36px;
                    line-height: 36px;
                }
                .label {
                    width: 70px;
                    height: 36px;
                    line-height: 36px;
                    text-align: right;
                    font-size: 14px;
                    color: #485460;
                    margin-right: 14px;
                    float: left;
                }
                .item {
                    float: left;
                    width: 516px;
                    .lineheight {
                        display: inline-block;
                        height: 36px;
                        line-height: 36px;
                    }
                }
                > div {
                    margin-bottom: 20px;
                    overflow: hidden;
                }
                .spec {
                    margin-bottom: 2px;
                    ul {
                        overflow: hidden;
                        li {
                            float: left;
                            min-width: 120px;
                            height: 36px;
                            padding: 0 10px;
                            box-sizing: border-box;
                            border: 1px solid #788492;
                            color: #788492;
                            line-height: 36px;
                            text-align: center;
                            margin-right: 14px;
                            margin-bottom: 10px;
                            cursor: pointer;
                        }
                        .li:nth-child(3) {
                            margin-right: 0 !important;
                        }
                        li.active {
                            background: #49cbcd;
                            color: white;
                            border: 1px solid #49cbcd;
                        }
                    }
                }
                .distribution {
                    .ivu-select {
                        float: left;
                        margin-right: 20px;
                    }

                    .ivu-select-selected-value {
                        height: 32px;
                        line-height: 32px;
                    }
                    .ivu-col {
                        width: 130px !important;
                    }
                }
                .num {
                    .num-input {
                        width: 120px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        position: relative;
                        display: inline-block;
                        border: 1px solid #788492;
                        box-sizing: border-box;
                        margin-right: 20px;
                        div {
                            height: 100%;
                            width: 32px;
                            box-sizing: border-box;
                            color: #788492;
                            font-size: 16px;
                        }
                        .reduce {
                            position: absolute;
                            left: 0;
                            top: 0;
                            border-right: 1px solid #788492;
                            cursor: pointer;
                        }
                        .reduce:active,
                        .reduce:visited {
                            color: #49cbcd;
                        }
                        .add {
                            position: absolute;
                            right: 0;
                            top: 0;
                            border-left: 1px solid #788492;
                            cursor: pointer;
                        }
                        .add:active,
                        .add:visited {
                            color: #49cbcd;
                        }
                    }
                    .stock {
                        font-size: 14px;
                        color: #8898ab;
                    }
                }
                .margin-bottom {
                    margin-bottom: 10px;
                }
                .operation {
                    overflow: hidden;
                    button {
                        .zl-btn;
                        width: 120px;
                        height: 36px;
                        box-sizing: border-box;
                        line-height: 36px;
                        float: left;
                    }
                    .buy {
                        margin-right: 20px;
                    }
                    .join-car {
                        display: inline-block;
                        height: 36px;
                        line-height: 34px;
                        background: #fff;
                        color: #788492;
                        border: 1px solid @activeColor;
                    }
                    p {
                        font-size: 18px;
                        font-weight: 600;
                    }
                }
            }
        }
    }
    .detaile {
        .width-1260-center;
        .pr-160;
        .thead {
            height: 50px;
            background: #8898ab;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            color: #fff;
        }
        h5 {
            font-size: 24px;
            padding-bottom: 30px;
            color: #364049;
        }
        // 表格
        table {
            .width-1260-center;
            .pr-160;
            font-size: 14px;
            color: #485460;
            text-align: center;
        }
        table {
            table-layout: fixed;
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td {
            height: 40px;
            font-size: 14px;
            color: #485460;
        }

        .table {
            // border: 1px solid #cad9ea;
            color: #666;
            width: 100%;
            background: #fff;
            tr {
                td:nth-child(1) {
                    width: 40%;
                    border-right: 3px solid #fff;
                }
                td:nth-child(2) {
                    width: 60%;
                }
            }
            tr:nth-child(1n) {
                background: #f5f5f5;
            }
        }
        .table th {
            background-repeat: repeat-x;
            // width: 1100px;
            height: 50px;
            background-color: #8898ab;
        }
        .table td,
        .table th {
            // border: 1px solid #cad9ea;
            padding: 0 1em 0;
        }
        // .table tr:nth-child(3n) {
        //   background-color: red;
        // }
        .table tr:nth-child(2n) {
            background-color: rgba(136, 152, 171, 0.2);
            // opacity: 0.2;
        }
    }

    .show {
        .width-1260-center;
        .pr-160;
        margin-top: 70px;
        margin-bottom: 56px;

        ul {
            li {
                height: 618px;
                width: 100%;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                position: relative;
            }
        }
        .show-cover {
            position: absolute;
            left: 634px;
            bottom: 0px;
            width: 466px;
            height: 160px;
            opacity: 0.9;
            background-color: #49cbcd;
            span {
                display: block;
                font-size: 20px;
                color: #ffffff;
                font-weight: bold;
                padding-left: 56px;
                padding-top: 30px;
            }
            .show-content {
                padding-top: 10px;
                p {
                    font-size: 16px;
                    color: #ffffff;
                    padding-left: 56px;
                }
            }
        }
    }
    .un-have {
        width: 100%;
        height: 569px;
        background-color: #f5f5f5;
        margin-bottom: 56px;
        text-align: center;
        .unhave-imgage {
            padding-top: 176px;
        }
        .unhave-warn {
            font-size: 14px;
            color: #788492;
            margin-top: 22px;
            .other {
                color: #788492;
                margin-left: 40px;
                margin-right: 10px;
                font-weight: bold;
            }
            i {
                font-size: 17px;
                position: relative;
                top: 2px;
            }
            .dent {
                margin-left: -5px;
            }
        }
    }
    button:hover {
        background: #0d9fa2 !important;
        color: #fff !important;
    }
    .join-car:hover {
        background-color: #49cbcd !important;
    }
}
//下拉框聚焦颜色
.gooddetail .ivu-select-selection {
    border-radius: 0;
    border: 1px solid #788492;
    .ivu-select-placeholder {
        color: #788492;
    }
}
